<template>
  <view>
    <view class="public-content">
      <!-- <top-nav-bar /> -->
      <uni-nav-bar
        fixed
        background-color="#fff"
        left-icon="left"
        height="120rpx"
        @clickLeft="onBack"></uni-nav-bar>
      <view
        v-if="item"
        style="width: 100%">
        <!-- <view class="public-title">
          {{ item.articleTitle || item.productTitle }}
        </view>
        <view class="public-desc">{{ item.articleDescription || item.productDescription }}</view> -->
        <view
          v-if="item.articleImg || item.productImg"
          style="width: 100%; border-radius: 30rpx; overflow: hidden; margin-bottom: 26rpx">
          <image
            :src="item.articleImg || item.productImg"
            lazy-load
            mode="widthFix"
            style="width: 100%; height: 100%">
          </image>
        </view>
        <view v-html="formatHtml(item.articleDetails || item.productDetails)"></view>
      </view>
    </view>
    <foot-page style="margin-top: 50rpx" />
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import http from '@/utils/request.js'
  import { ref } from 'vue'
  import { useUser } from '@/hooks/useUser'

  const { onBack } = useUser()

  const item = ref(null)

  const formatHtml = (html) => {
    let newContent = html.replace(/<img/gi, '<img style="width:100%;height:auto;"')
    return newContent
  }

  onLoad(async (e) => {
    let url = '/api/free/service/articleContent'
    if (e.type == 1) {
      // 产品介绍进入
      url = '/api/free/service/loansProduct'
    }
    const res = await http.get(`${url}/${e.articleId}`)
    item.value = res
  })
</script>

<style lang="scss" scoped>
  .public-title {
    margin: 20rpx 0 20rpx;
  }

  .public-desc {
    margin: 0;
    margin-bottom: 20rpx;
  }
</style>
